<script setup>
import '@mdi/font/css/materialdesignicons.css';
import {ref} from "vue";
import {goHome} from "../../tools/go";
import {getAllClasses} from "../../api/waste/wasteClass.ts"
import {getWasteByPrice} from "../../api/waste/waste.js";
import {baseUrl} from "../../api/http";
import UniSection from "../../uni_modules/uni-section/components/uni-section/uni-section.vue";
import UniPopup from "../../uni_modules/uni-popup/components/uni-popup/uni-popup.vue";
import {getUserId} from "../../store";
import {toast} from "../../components/popup/popup";
import {addWasteOrder} from "../../api/waste/order";
import {addUserAddr, getAddrByUserId,deleteAddr} from "../../api/waste/addr";

const questlist = ref([
  {id:'1',text:'1、旧纸张怎么回收？',icon: false},
  {id:'2',text:'2、纸箱回收需要拆开吗？',icon: true},
  {id:'3',text:'3、电子垃圾如何处理？',icon: true},
  {id:'4',text:'4、大件垃圾需要拆解吗？',icon: true},
])

const selectUserAddr = ref()

const order= ref({
  price: 0,
  weight: 20,
  addrId: 0,
  user:getUserId(),
  img: ""
})

const addrFromData = ref({
  id: 0,
  userId: getUserId(),
  contact: "",
  addr: "",
  remark: "",
  updateBy: getUserId()
})

const orderFromData = new FormData();

const curClass = ref({
  id: ''
})

const curWaste = ref({
  id: 13,
  wasteClassId: 6,
  wasteName: "塑料盒子",
  wastePrice: 0.0,
  lastWastePrice: 0.0,
})

const curAddr = ref({
  id: 0,
  userId: 0,
  userNick: "",
  contact: "",
  addr: "",
  remark: ""
})

const userAddr = ref([
  {
    id: 1,
    userId: 23,
    userNick: "bbm",
    contact: "13213214",
    addr: "广西",
    remark: "学校"
  },
])

const addUserAdder = ref()


const handClassClick = (item) => {
  Object.assign(curClass.value, item)
  getWasteList2(curClass.value.id)
  getPrice()
}

const handWasteClick = (item) => {
  Object.assign(curWaste.value, item)
  getPrice()
}

const handAddrClick = (item) => {
  Object.assign(curAddr.value, item)
  selectUserAddr.value.close()

}

const handAddrList = () => {
  selectUserAddr.value.open()
}

const activeindex = ref(0)
const list = ref([])
const list2 = ref([])

const getAllClass = () => {
  getAllClasses().then(res => {
    list.value = res.data
    getWasteList2(res.data[0].id)
  })
}
const getWasteList2 = (id) => {
  getWasteByPrice(id).then(res => {
    list2.value = res.data
    Object.assign(curWaste.value, list2.value[0])
    getPrice()
  })
}

const sliderChange = (value) => {
  order.value.weight = value.detail.value
  getPrice()
}

const getPrice = () => {
  order.value.price = (order.value.weight * curWaste.value.wastePrice).toFixed(2)
}

const i = () => {
  getAllClass()
  getAddrByUserId(getUserId()).then(res => {
    userAddr.value = res.data
    curAddr.value = res.data[0]
  })
}

const handUpload = () => {
  let htmlInputElement = document.createElement('input');

  htmlInputElement.type = "file"
  htmlInputElement.accept = "image/*"

  htmlInputElement.onchange = (e) => {
    let file = e.target.files[0]
    orderFromData.delete('img')
    orderFromData.append('img', file)
    let reader = new FileReader();

    reader.onload = (e) => {
      order.value.img = e.target.result;
    };

    reader.readAsDataURL(file);

  }

  htmlInputElement.click()
}

const handSubmit = () => {

  orderFromData.append("wasteId", curWaste.value.id)
  orderFromData.append("userAddrId", curAddr.value.id)
  orderFromData.append("updateBy", getUserId())
  orderFromData.append("orderPrice", order.value.price)

  addWasteOrder(orderFromData).then(res => {
    console.log(res)
    if (res.code === 200) {
      toast("下单成功","none")
      goHome()
    }
  })

}

const handleLongPress = (item) => {
  uni.showModal({
    title: '删除地址',
    content: '是否确认删除该地址？',
    success: (res) => {
      if (res.confirm) {
        deleteAddrs(item.id); // 调用删除地址的方法
      }
    }
  });
};


const handNewAddSubmit = () => {
  addUserAddr(addrFromData.value).then(res => {
    if (res.code === 200) {
      toast("添加成功", "none");
      addUserAdder.value.close();
      i();

      // 清空输入框
      addrFromData.value.addr = "";
      addrFromData.value.contact = "";
      addrFromData.value.remark = "";
    }
  });
}

//删除地址
//id 为 地址的id
//传入id即可删除
const deleteAddrs = (id) => {
  deleteAddr(id).then(res => {
    if (res.code === 200) {
      toast("删除成功","none")
      i()
    }
  })
}

i()

const activefn = (item,index) =>{
  activeindex.value = index;
  handClassClick(item)
}
</script>

<template>


  <!--选择地址-->
  <uni-popup ref="selectUserAddr">
    <view class="user_addr_list">
      <h4 class="h4">添加收获地址</h4>
      <view
          class="user_addr"
          v-for="(item, index) in userAddr"
          @click="handAddrClick(item)"
          @longpress="handleLongPress(item)"
      >
        <view class="remark">
          <text>{{ item.remark }}</text>
        </view>

        <view class="addr">
          <text>{{ item.addr }}</text>
        </view>

        <view class="contact">
          <text>{{ item.userNick }}</text>
          <text>{{ item.contact }}</text>
        </view>
      </view>
      <view style="position: fixed; top: 74vh; width: 74%;">
        <button type="primary" @click="addUserAdder.open">新增地址</button>
      </view>
    </view>
  </uni-popup>

  <!--新增地址-->
  <uni-popup ref="addUserAdder">
    <view class="form_data">
      <uni-section  title="地址"  type="line">
        <input style=" font-size: 17px;margin-left: 10px" v-model="addrFromData.addr" placeholder="请输入地址" />
      </uni-section>

      <uni-section title="联系电话" type="line">
        <input style=" font-size: 17px;margin-left: 10px" v-model="addrFromData.contact" placeholder="请输入联系电话" />
      </uni-section>

      <uni-section  title="用户备注" type="line">
        <input style=" font-size: 17px;margin-left: 10px"  v-model="addrFromData.remark" placeholder="请输入备注" />

      </uni-section>

      <uni-section title="">
        <button type="primary" @click="handNewAddSubmit">提交</button>
      </uni-section>
    </view>
  </uni-popup>

  <view class="waste-container">
    <!-- 页面头部 -->
    <view class="page-header">
      <v-icon @click="goHome()" class="back-icon" icon="mdi-chevron-left"></v-icon>
      <h3>闲置回收</h3>
    </view>

    <!-- 背景图片 -->
    <view class="banner">
      <img src="../../static/img/wsi.png" alt="回收背景">
    </view>

    <!-- 回收品类选择 -->
    <section class="category-section">
      <h3>选择回收品类</h3>
      <ul class="category-list">
        <li
            v-for="(item, index) in list"
            @click="activefn(item,index)"
            :key="item.id"
            :class="{ active:activeindex === index }"
        >
          <a>
            <img :src="baseUrl + item.clientUrl" alt="">
            <text>{{ item.wasteClassName }}</text>
          </a>
        </li>
      </ul>
    </section>

    <!-- 今日指导价 -->
    <section class="guide-price">
      <h4>今日指导价</h4>
      <ul class="price-list">
        <li v-for="item in list2" :key="item.id" @click="handWasteClick(item)">
          <a>
            <text>{{ item.wasteName }}</text>
            <text class="price-value">{{ item.wastePrice }}￥/kg</text>
          </a>
        </li>
      </ul>
    </section>

    <!-- 地址信息 -->
    <section class="address-section">
      <view class="address-info">
        <v-icon icon="mdi-map-marker-outline" class="location-icon"></v-icon>
        <text>{{curAddr == null ? '请选择地址':curAddr.addr}}</text>
      </view>
      <view class="address-detail">
        <text class="unit-info">{{curAddr == null ? '暂无':curAddr.remark}}</text>
        <button class="address-book-btn" @click="handAddrList">
          <v-icon class="icon" icon="mdi-account-box-outline"></v-icon>
          <text>地址簿</text>
        </button>
      </view>
      <view class="contact-info">
        <text>联系人：{{curAddr.userNick}}</text>
        <text>{{curAddr.contact}}</text>
      </view>
    </section>

    <!-- 重量选择 -->
    <section class="weight-section">
      <h4>选择预估重量 <small>(结算价格以实物为准)</small></h4>
      <uni-section :title="'预估重量 ' + order.weight + '公斤'">
        <slider activeColor="#FFCC33" :value="order.weight" @change="sliderChange" />
      </uni-section>

      <view class="estimate-card">
        <view class="estimate-content">
          <view class="estimate-earning">
            <text class="section-title">预计收益</text>
            <view class="earning-value">
              <v-icon class="icon" icon="mdi-wallet"></v-icon>
              <text>{{order.price}} 元</text>
            </view>
            <text class="hint-text">结算金额以实际为准</text>
          </view>

        </view>
      </view>
    </section>

    <!-- 图片上传 -->
    <section class="upload-section">
      <h4>上传图片 <small>(100公斤以上必填)</small></h4>
      <image v-if="order.img" :src="order.img" @click="handUpload" style="width: 100px;height: 100px"></image>
      <view v-else class="upload-area" @click="handUpload">
        <input class="file-input" type="file" name="recyclePhoto" id="recyclePhoto">
        <v-icon class="camera-icon" icon="mdi-camera"></v-icon>
      </view>
      <p class="upload-hint">为了回收员能够更快地回收您的物品，请上传清晰图片</p>
    </section>

    <!-- 回收流程 -->
    <section class="process-section">
      <h4>回收流程</h4>
      <ul class="process-steps">
        <li>
          <view class="step">
            <v-icon class="step-icon" icon="mdi-cellphone"></v-icon>
            <text>手机下单</text>
          </view>

        </li>
        <li>
          <view class="step">
            <v-icon class="step-icon" icon="mdi-account-clock"></v-icon>
            <text>等待接单</text>
          </view>
        </li>
        <li>
          <view class="step">
            <v-icon class="step-icon" icon="mdi-truck-delivery"></v-icon>
            <text>上门回收</text>
          </view>
        </li>
        <li>
          <view class="step">
            <v-icon class="step-icon" icon="mdi-cash-multiple"></v-icon>
            <text>现场结算</text>
          </view>
        </li>
      </ul>
    </section>

    <!-- 注意事项 -->
    <section class="notes-section">
      <h4>回收要求</h4>
      <ul class="notes-list">
        <li>
          <h5>1、整理打包</h5>
          <p>请将同类物品整理装好，避免混杂</p>
            <h5>2、保持干燥</h5>
            <p>物品尽量保持干燥，不要有明显异味</p>
            <h5>3、联系方式</h5>
            <p>保持电话畅通，方便回收员联系</p>
        </li>
      </ul>
    </section>

    <!-- 常见问题 -->
    <section class="faq-section">
      <h4 class="section-title">常见问题</h4>
      <ul class="faq-list">
        <li v-for="(item, index) in questlist" :key="item.id">
          <view class="faq-item">
            <view class="faq-header" @click="item.icon = !item.icon">
              <h5>{{ item.text }}</h5>
              <v-icon class="toggle-icon" :icon="item.icon ? 'mdi-chevron-up' : 'mdi-chevron-down'"></v-icon>
            </view>
            <view class="faq-content" v-if="item.icon">
              <p>回收员会上门回收各类废品，包括纸张、塑料、金属、电子产品等，请将物品分类整理好，便于回收和计价。</p>
            </view>
          </view>
        </li>
      </ul>
    </section>

    <!-- 提交按钮 -->
    <view class="submit-container">
      <button class="submit-button" @click="handSubmit">提交订单</button>
    </view>

    <!-- 底部安全间距 -->
    <view class="safe-area-bottom"></view>
  </view>
</template>

<style scoped lang="scss">
@use "../../static/css/main";

.ai{
  img{
    width: 100%;
    height: 100%;
  }
  position: fixed;
  width: 100px;
  height: 100px;
  touch-action: none;
}
.form_data {
  background-color: #ffffff;
  padding: 32rpx 40rpx;
  border-radius: 24rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
  min-width: 90vw;
  max-width: 600rpx;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1rpx solid #f0f0f0;

  &:hover {
    box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.12);
  }

  uni-section {
    margin-left: 50px;
    font-size: 20px;
    margin-bottom: 32rpx;
    position: relative;

    &:last-child {
      margin-bottom: 0;
    }

    .form-label {
      display: block;
      margin-bottom: 16rpx;
      font-size: 21px;
      color: #555;
      font-weight: 500;
      transition: color 0.3s ease;
    }

    input {
      font-size: 17px;
      margin-left: 10px;
      width: 100%;
      height: 80rpx;
      padding: 0 24rpx;
      border: 2rpx solid #e0e0e0;
      border-radius: 12rpx;
      color: #222;
      transition: all 0.3s ease;
      background: #f8fafb;

      &:hover {
        border-color: #c0c0c0;
      }

      &:focus {
        border-color: #40d388;
        box-shadow: 0 0 0 3rpx rgba(64, 211, 136, 0.2);
        background: #fff;
      }

      &::placeholder {
        color: #aaa;
        font-weight: 300;
      }
    }

    button {
      width: 100%;
      height: 88rpx;
      background: linear-gradient(135deg, #40d388, #35b877);
      color: #fff;
      border: none;
      border-radius: 12rpx;
      padding: 0;
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      box-shadow: 0 4rpx 16rpx rgba(64, 211, 136, 0.3);

      &::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 200%;
        height: 100%;
        background: linear-gradient(
                90deg,
                transparent,
                rgba(255, 255, 255, 0.2),
                transparent
        );
        transition: left 0.6s ease;
      }

      &:hover {
        box-shadow: 0 6rpx 24rpx rgba(64, 211, 136, 0.4);
        transform: translateY(-2rpx);
      }

      &:active {
        transform: translateY(1rpx);
        box-shadow: 0 2rpx 8rpx rgba(64, 211, 136, 0.3);
      }

      &:hover::after {
        left: 100%;
      }
    }
  }

  @keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
  }
}
//
.user_addr_list::-webkit-scrollbar {
  display: none;
}
.user_addr_list {
  .h4{
    text-align: center;
    position: fixed;
    display: block;
    font-weight: 400;
    font-size: 19px;
    width: 74%;
    background: #FFFFFF;
    height: 50px;
    margin-top: -10px;
    line-height: 50px;

  }
  width: 300px;
  height: 60vh;
  overflow: auto;
  background-color: #ffffff;
  padding: 20rpx;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  min-width: 80vw;
  position: relative;
  .user_addr {
    display: flex;
    flex-direction: column;
    padding: 20rpx;
    margin-bottom: 20rpx;
    border-bottom: 1rpx solid #e8e8e8;
    transition: background-color 0.3s ease;

    &:last-child {
      border-bottom: none;
      margin-bottom: 0;
    }

    &:hover {
      background-color: #f5f7fa;
    }

    .remark {
      font-size: 22px;
      color: #333;
      font-weight: 400;
      margin-bottom: 8rpx;
    }

    .addr {
      font-size: 17px;
      color: #666;
      margin-bottom: 8rpx;
    }
    .but{
      position: fixed;
      top: 72vh;
      width: 74%;
    }

    .contact {
      font-size: 17px;
      color: #999;
      display: flex;
      gap: 10rpx;

      text:first-child {
        font-weight: 500;
        color: #333;
      }
    }
  }

  button {
    width: 100%;
    background-color: #40d388;
    color: #ffffff;
    border: none;
    border-radius: 8rpx;
    padding: 12rpx;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;

    &:hover {
      background-color: #38bd7a;
    }
  }
}








* {
  list-style: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.waste-container {
  width: 100%;
  min-height: 100vh;
  background: #F5F7FA;
  color: #333;

  // 页面头部
  .page-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 56px;
    font-weight: 400;
    background: #FFFFFF;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    z-index: 10;

    h3 {
      color: #333;
      font-size: 18px;
      font-weight: 400;
    }

    .back-icon {
      position: absolute;
      left: 16px;
      font-size: 24px;
      color: #333;
    }
  }

  // 背景图片
  .banner {
    width: 100%;
    height: auto;
    overflow: hidden;

    img {
      width: 100%;
      height: auto;
      object-fit: cover;
    }
  }

  // 通用样式
  section {
    width: 92%;
    margin: 16px auto;
    background: #FFFFFF;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);

    h3, h4 {
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 12px;
      color: #333;

      small {
        font-size: 12px;
        font-weight: 400;
        color: #999;
        margin-left: 4px;
      }
    }
  }

  // 回收品类选择
  .category-section {
    margin-top: -5px;
    z-index: 1;
    position: relative;

    h3 {
      color: #F9A825;
    }

    .category-list {
      display: flex;
      overflow-x: auto;
      padding: 4px 0 16px;
      -webkit-overflow-scrolling: touch;

      &::-webkit-scrollbar {
        display: none;
      }

      li {
        flex: 0 0 auto;
        width: 100px;
        margin-right: 10px;
        border: 1px solid #1CD786;
        border-radius: 10px;
        overflow: hidden;
        transition: all 0.3s ease;

        &.active {
          border-color: #FCBC23;
        }

        a {
          display: flex;
          flex-direction: column;
          align-items: center;
          background: #E9FFF3;

          img {
            width: 70px;
            height: 70px;
            padding: 10px;
            object-fit: contain;
          }

          text {
            display: block;
            width: 100%;
            padding: 8px 0;
            font-size: 14px;
            text-align: center;
            background: #E0F7EC;
            color: #1CD786;
            transition: all 0.3s ease;
          }
        }

        &.active a text {
          background: #FCBC23;
          color: #FFFFFF;
        }

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
        }
      }
    }
  }

  // 今日指导价
  .guide-price {
    background: #F8F3EC;
    position: relative;
    margin-top: -16px;

    h4 {
      position: relative;

      &:before {
        content: "";
        position: absolute;
        top: -22px;
        left: 27px;
        border-bottom: 11px solid #F8F3EC;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
      }
    }

    .price-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;

      li {
        a {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 10px;
          background: #FFFFFF;
          border-radius: 8px;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

          text {
            color: #666;
            font-size: 12.5px;

            &.price-value {
              color: #1CD786;
              font-weight: 500;
            }
          }

          &:hover {
            background: #FAFAFA;
          }
        }
      }
    }
  }

  // 地址部分
  .address-section {
    .address-info {
      display: flex;
      align-items: flex-start;

      .location-icon {
        color: #F9A825;
        margin-right: 8px;
        flex-shrink: 0;
      }

      text {
        font-size: 15px;
        line-height: 1.4;
      }
    }

    .address-detail {
      display: flex;
      align-items: center;
      justify-content: space-between;


      .unit-info {
        font-size: 14px;
        color: #999;
        margin-left: 32px;
      }

      .address-book-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 60px;
        height: 60px;
        background: #40D388;
        color: #FFFFFF;
        border: none;
        border-radius: 12px;
        padding: 0;
        cursor: pointer;

        .icon {
          font-size: 24px;
          margin-bottom: -5px;
        }

        text {
          font-size: 12px;
        }

        &:active {
          background: #38BD7A;
        }
      }
    }

    .contact-info {
      margin-left: 32px;

      text {
        font-size: 14px;
        color: #999;
        margin-right: 8px;

        &:last-child {
          color: #666;
        }
      }
    }
  }

  // 重量选择
  .weight-section {
    .weight-options {
      display: flex;
      justify-content: space-between;
      margin-bottom: A16px;

      li {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 60px;
        margin: 0 4px;
        background: #F5F7FA;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s ease;

        text {
          font-size: 13px;
          text-align: center;
          line-height: 1.3;
        }

        &.active {
          background: #FCBC23;
          color: #FFFFFF;
        }

        &:hover:not(.active) {
          background: #EBEEF5;
        }
      }
    }

    .estimate-card {
      background: #FAFAFA;
      border-radius: 8px;
      overflow: hidden;
      margin-top: 16px;

      .estimate-content {
        display: flex;
        padding: 16px;

        .estimate-earning {
          flex: 1;
          border-right: 1px solid #EAEAEA;
          padding-right: 16px;

          .section-title {
            font-size: 14px;
            color: #999;
            margin-bottom: 8px;
            display: block;
          }

          .earning-value {
            display: flex;
            align-items: center;
            margin-bottom: 4px;

            .icon {
              color: #F9A825;
              margin-right: 4px;
            }

            text {
              font-weight: 500;
              color: #F9A825;
              font-size: 16px;
            }
          }

          .hint-text {
            font-size: 12px;
            color: #AAAAAA;
          }
        }

        .estimate-reward {
          flex: 1;
          padding-left: 16px;

          .section-title {
            font-size: 14px;
            color: #999;
            margin-bottom: 8px;
            display: block;
          }

          .reward-value {
            display: flex;
            align-items: center;

            .icon {
              color: #1CD786;
              margin-right: 4px;
            }

            text {
              font-weight: 500;
              color: #1CD786;
              font-size: 16px;
            }
          }
        }
      }
    }
  }

  // 图片上传
  .upload-section {
    .upload-area {
      width: 100px;
      height: 100px;
      border: 1px dashed #CCCCCC;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      margin-bottom: 12px;
      background: #FAFAFA;

      .file-input {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
      }

      .camera-icon {
        font-size: 32px;
        color: #CCCCCC;
      }

      &:hover {
        border-color: #1CD786;

        .camera-icon {
          color: #1CD786;
        }
      }
    }

    .upload-hint {
      font-size: 12px;
      color: #999;
      margin-top: 8px;
    }
  }

  // 回收流程
  .process-section {
    font-weight: 400;
    .process-steps {
      display: flex;
      li {
        flex: 1;
        padding: 16px 0;

        &:last-child {
          border-bottom: none;
        }

        .step {
          display: flex;
          flex-direction: column;
          align-items: center;
          .step-icon {
            width: 40px;
            height: 40px;
            background: #E0F7EC;
            border-radius: 50%;
            color: #1CD786;
            margin-bottom: 10px;
          }

          text {
            font-size: 14px;
            color: #666;
          }
        }

        .arrow-icon {
          color: #CCCCCC;
          font-size: 20px;
        }
      }
    }
  }

  // 注意事项
  .notes-section {
    .notes-list {
      li {
        padding: 0;
        border-bottom: 1px solid #EAEAEA;

        &:last-child {
          border-bottom: none;
        }

        h5 {
          font-size: 15px;
          font-weight: 500;
          margin-top: 5px;
          color: #333;
        }

        p {
          font-size: 13px;
          color: #666;
          line-height: 1.5;
        }
      }
    }
  }

  // 常见问题
  .faq-section {
    .section-title {
      margin-bottom: 16px;
    }

    .faq-list {
      .faq-item {
        background: #FAFAFA;
        border-radius: 8px;
        overflow: hidden;
        margin-bottom: 12px;

        &:last-child {
          margin-bottom: 0;
        }

        .faq-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 14px;
          cursor: pointer;

          h5 {
            font-size: 15px;
            font-weight: 500;
            color: #333;
          }

          .toggle-icon {
            color: #999;
            transition: transform 0.3s ease;
          }

          &:hover {
            background: #F5F5F5;

            .toggle-icon {
              color: #666;
            }
          }
        }

        .faq-content {
          padding: 0 14px 14px;

          p {
            font-size: 14px;
            color: #666;
            line-height: 1.6;
          }
        }
      }
    }
  }

  // 提交按钮
  .submit-container {
    display: flex;
    justify-content: center;
    margin: 24px 0;

    .submit-button {
      position: fixed;
      margin-bottom: 10px;
      bottom: 0;
      line-height: 48px;
      width: 90%;
      height: 48px;
      background: #F9A825;
      color: white;
      border: none;
      border-radius: 24px;
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(249, 168, 37, 0.2);
      transition: all 0.3s ease;

      &:hover {
        background: #E69722;
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(249, 168, 37, 0.3);
      }

      &:active {
        transform: translateY(0);
        box-shadow: 0 2px 8px rgba(249, 168, 37, 0.2);
      }
    }
  }

  // 底部安全间距
  .safe-area-bottom {
    height: 24px;
  }
}

// 响应式调整
@media screen and (max-width: 360px) {
  .waste-container {
    section {
      padding: 12px;
    }

    .category-section .category-list li {
      width: 90px;
    }

    .guide-price .price-list {
      gap: 6px;

      li a {
        padding: 10px;
      }
    }

    .weight-section .weight-options li {
      height: 50px;

      text {
        font-size: 12px;
      }
    }
  }
}
</style>